<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();%>
<%String contextPath = request.getContextPath();%>
<jsp:include page="inc.jsp" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<script type="text/javascript">
/* jquery入口*/
$(function() {
    loadgrid(); //加载datagrid
});
/* 加载datagrid列表*/
    function loadgrid(){
        $('#grid').datagrid({
        title : '结账',
        url : 'SaleController?method=selectSaleOrder',
        loadMsg : '正在加载…',  //当从远程站点载入数据时，显示的一条快捷信息。
        fit : true,  //窗口自适应
        nowrap: false, //设置为true，当数据长度超出列宽时将会自动截取
        fitColumns : true, // 自动适应列宽
        singleSelect : true, // 每次只选中一行
        sortName : 'id', //默认排序字段
        sortOrder : 'asc', // 升序asc/降序desc
        striped : true,  // 隔行变色  
        pagination : true,  // 在底部显示分页工具栏
        pageNumber : 1, //初始化页码 
        pageSize : 20,  // 指定每页的大小，服务器要加上page属性和total属性
        pageList : [ 20, 30, 50 ], // 可以设置每页记录条数的列表，服务器要加上rows属性
        //rownumbers : true, // 在最前面显示行号 
        idField : 'id', // 主键属性
        // 冻结列,当很多咧出现滚动条时该列不会动
        frozenColumns : [ [
        {title : '序号', width : '50', field : 'id', sortable : true}, 
        {title : '账单编号', width : '200', field : 'saleOrderNo', sortable : true}, 
        {	title : '客户ID', 
        	width : '100',    
        	field : 'customer_Id',
        	sortable : false
        	/* formatter: function(data){
        		return data.customerNo;
        	} */
        }
        ] ],
        columns : [ [ 
        {title : '价格', width : '70', field : 'total', sortable : false}, 
        {
        	title : '付款状态', 
        	width : '80',    
        	field : 'state', 
        	sortable : false,
        	formatter:function(value){
        		if(value==1){
        			return "<font color=\"green\">已付款</font>";
        		}else{
        			return "<font color=\"red\">未付款</font>";
        		}
        	}
        },
        {	title : '开单时间', 
        	width : '150', 
        	field : 'createDateTime',
        	sortable : false,
        	formatter: function(value){
        		var unixTimestamp = new Date(value);
        		return unixTimestamp.toLocaleString();
        	}
        },
        {field:'opt',title:'操作',width:50,align:'center',  
    		formatter:function(){  
    			return "<a class='sz_button' onclick='showView();' href='javascript:void(0);'>查看明细</a>";  
        	}} 
        ] ],
        /* onLoadSuccess:function(){
        	$('.sz_button').linkbutton({text:'查看明细',plain:true});  
        }, */
        // 工具栏按钮
        toolbar: '#tb'
    });
}

    /* 加载ItemDatagrid列表*/
    function loadItemGrid(row){
        $('#itemGrid').datagrid({
        url : 'SaleReturnController?method=selectSaleReturn',
        queryParams : { saleOrderNo: row.saleOrderNo },
        loadMsg : '正在加载…',  //当从远程站点载入数据时，显示的一条快捷信息。
        fit : true,  //窗口自适应
        nowrap: false, //设置为true，当数据长度超出列宽时将会自动截取
        fitColumns : true, // 自动适应列宽
        singleSelect : true, // 每次只选中一行
        sortName : 'id', //默认排序字段
        sortOrder : 'asc', // 升序asc/降序desc
        striped : true,  // 隔行变色  
        pagination : true,  // 在底部显示分页工具栏
        pageNumber : 1, //初始化页码 
        pageSize : 10,  // 指定每页的大小，服务器要加上page属性和total属性
        pageList : [ 10, 30, 50 ], // 可以设置每页记录条数的列表，服务器要加上rows属性
        //rownumbers : true, // 在最前面显示行号 
        idField : 'id', // 主键属性
        // 冻结列,当很多咧出现滚动条时该列不会动
        frozenColumns : [ [
        {title : '序号', width : '50', field : 'id', sortable : true}, 
        {title : '书名', width : '200', field : 'productName', sortable : true}, 
        {	title : 'ISBN码', 
        	width : '100',    
        	field : 'productNo',
        	sortable : false
        }
        ] ],
        columns : [ [ 
        {title : '定价', width : '70', field : 'price', sortable : false}, 
        {
        	title : '购买数量', 
        	width : '80',    
        	field : 'quantity', 
        	sortable : false
        },
        {	title : '小计', 
        	width : '150', 
        	field : 'subtotal',
        	sortable : false
        }
        ] ],
    });
}
    /* 显示Dialog*/
    function openDialog(title,row){
    	loadItemGrid(row);
        $("#dialog").dialog({
            resizable: true,
            modal: true
        });
        $("#dialog").dialog('setTitle', title);
        $("#dialog").dialog('open');
    }
	/* 关闭Dialog*/
    function closeDialog() {  
        $("#dialog").dialog('close');// 关闭dialog
    }
    /* 明细查看 */
	function showView(){
		var row = $('#grid').datagrid('getSelected');
    	openDialog('账单明细',row);
    }
	/* 刷新grid*/
        function reload(){
            $('#grid').datagrid('reload');
        }
	/* 搜索 */
	function search(value,name){
			$('#grid').datagrid('load',{ key: value,type:name });
		}
</script>
<body>
<div style="width:100%;height:100%;padding:0px;overflow:hidden">
		<table id="grid"></table>
	</div>
     <div id='tb'>
		<a class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="reload()">刷新</a>
		<input id="ss" class="easyui-searchbox" data-options="prompt:'请输入搜索内容',menu:'#mm',searcher:search" style="width:300px"></input>
     </div>
     <div id="mm">
		<div data-options="name:'id'">ID</div>
		<div data-options="name:'state'">State</div>
	</div>
	<div id="dialog" class="easyui-dialog" data-options="closed:true" title="账单明细" style="width:700px;height:350;text-align:center" >
    	<table id="itemGrid"></table>
    </div>
</body>
</html>